<script lang="ts" setup>
  import { provide } from "vue";
  import { buildStyles } from "../utils";
  import * as _ from "@usemath/utils";

  interface Props {
    justify?: string;
    gutter?: number | number[];
    align?: "flex-start" | "center" | "flex-end" | "stretch" | "baseline";
  }

  const props = defineProps<Props>();

  provide("gutter", props.gutter);

  const styles = buildStyles(() => {
    const { gutter, justify, align } = props;
    const map: any = {
      justifyContent: justify,
      alignItems: align,
    };

    if (_.isNumber(gutter)) {
      const margin = -gutter / 2 + "px";
      map.margin = `0 ${margin}`;
      map.width = `calc(100% - ${gutter})`;
      map.rowGap = gutter + "px";
    } else if (_.isArray(gutter) && gutter.length >= 2) {
      const [horizontalGutter, verticalGutter] = gutter;
      map.margin = `${-verticalGutter / 2}px 0`;
      map.marginLeft = map.marginRight = -horizontalGutter / 2 + "px";
      map.width = `calc(100% - ${verticalGutter})`;
    }

    return map;
  });
</script>

<template>
  <div class="umi-row" :style="styles">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
  .umi-row {
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box;
  }
</style>
